<template>
  <div class="tabs">
    <div>
      <ul class="tabWrapper">
        <li
          v-for="(item, index) in menu"
          :key="index"
          :class="{
            [item.comp]: item.num,
            active: isActive == item.num ? true : false,
          }"
          @click="clickTab(item)"
        >
          <template v-if="isActive == item.num">
            <icon-park
              :type="item.type"
              theme="outline"
              size="16"
              fill="#3A58B9"
              :strokeWidth="2"
            />
          </template>
          <template v-else>
            <icon-park
              :type="item.type"
              theme="outline"
              size="16"
              fill="#8691A3"
              :strokeWidth="2"
            />
          </template>
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!-- <div class="tabBody" :class="{showBody: showBody == isActive ? true : false}"> -->
    <div class="tabBody" v-show="isShow">
      <div :is="currentComp"></div>
    </div>
  </div>
</template>
<script>
const titleObj = {
  random: '随机布局',
  force: '力导布局',
  circular: '环形布局',
  radial: '辐射状布局',
  dagre: '树状布局',
  dendrogram: '同心圆布局',
  grid: '网格布局',
};
import { IconPark } from '@icon-park/vue/es/all';
import selInput from '../tabs/input.vue';
import layout from '../tabs/layout.vue';
import refresh from '../tabs/refresh.vue';
export default {
  components: {
    IconPark,
    selInput,
    layout,
    refresh,
  },
  data() {
    return {
      // 当前选中的组件
      currentComp: 'selInput',
      // 当前选中的li标签
      isActive: '1',
      isShow: false,
      menu: [
        {
          // li标签的内容
          name: '定位',
          // 当前li标签是否选中的标识
          num: '1',
          // 点击当前li标签，要显示的组件
          comp: 'selInput',
          // 图标主题
          type: 'aiming',
        },
        {
          name: '静态布局',
          num: '2',
          comp: 'layout',
          type: 'copy',
        },
        {
          name: '重新布局',
          num: '3',
          comp: 'refresh',
          type: 'refresh',
        },
      ],
    };
  },
  mounted() {
    this.$eventBus.$on('refreshLayout', this.changeTitle);
  },
  beforeDestroy() {
    this.$eventBus.$off('refreshLayout');
  },
  methods: {
    clickTab(params) {
      if (this.isActive === params.num) {
        this.isShow = !this.isShow;
      } else {
        this.isShow = true;
      }
      this.isActive = params.num;
      this.currentComp = params.comp;
      if (params.name == '重新布局') {
        this.$eventBus.$emit('refreshLayout');
      }
    },
    changeTitle(arg) {
      if (arg) {
        this.menu.map((item) => {
          if (item.num === '2') {
            item.name = titleObj[arg];
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs {
  width: 330px;
  box-shadow: 0px 4px 4px 4px rgba(172, 176, 191, 0.14);
  border-radius: 2px;
}

// 样式
.tabWrapper {
  overflow: hidden;
  width: 330px;
  display: flex;
  align-items: center;
  color: #333333;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;

  li {
    list-style: none;
    float: left;
    margin-left: 20px;
    font-size: 14px;
    margin: 0;
    text-align: center;
    height: 20px;
    line-height: 20px;
    cursor: pointer;

    .i-icon {
      position: relative;
      top: 4px;
    }
  }

  li.selInput {
    flex-grow: 2;
    border-right: 1px solid #f2f2f2;
  }

  li.layout {
    flex-grow: 3;
    border-right: 1px solid #f2f2f2;
  }

  li.refresh {
    flex-grow: 3;
  }

  li.active {
    font-size: 14px;
    color: #3a58b9;
  }
}

.tabBody {
  width: 350px;
  background: #fff;
  overflow: hidden;
}
</style>
